<template>
  <view class="page-container">
    <!-- 标题栏 -->
    <view style="background-color: #2dbb55" :style="{ height: bgHeight }">
      <view
        style="
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-left: 20rpx;
          margin-right: 20rpx;
        "
        :style="{ paddingTop: topHeigh }"
      >
        <u-icon
          name="arrow-left"
          size="28"
          color="#ffffff"
          @click="handleBack"
        ></u-icon>
        <text style="color: #ffffff; font-size: 36rpx">运营专员</text>
        <text style="height: 28rpx; width: 28rpx"></text>
      </view>
    </view>
    <!-- 内容 -->
    <view class="page-content">
      <view class="code">
        <u-image
          src="/static/code.jpg"
          width="503rpx"
          height="497rpx"
        ></u-image>
        <text class="text-1"> 加我微信 拉您进行业万人群 </text>
        <text class="text-2"> 长按识别二维码 </text>
      </view>
      <text class="text-3"> 行业万人群，限时免费入群 </text>
      <view class="icon-list">
        <view class="item">
          <u-image
            src="/static/group-2.png"
            width="58rpx"
            height="58rpx"
          ></u-image>
          <text class="text-4">优质</text>
          <text class="text-4">一手商机</text>
        </view>
        <view class="item">
          <u-image
            src="/static/group-3.png"
            width="58rpx"
            height="58rpx"
          ></u-image>
          <text class="text-4">把握行业</text>
          <text class="text-4">最新动态</text>
        </view>
        <view class="item">
          <u-image
            src="/static/group-4.png"
            width="58rpx"
            height="58rpx"
          ></u-image>
          <text class="text-4">双向沟通</text>
          <text class="text-4">交流及时</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 获取整个导航栏高度
      bgHeight: this.ToolClass.getNavtionBarAllHeight(),
      // 获取微信胶囊高度
      topHeigh: this.ToolClass.getWXJNHeight(),
    };
  },
  watch: {},
  onShow() {},
  methods: {
    handleBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style scoped>
view {
  box-sizing: border-box;
}
.page-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(181deg, #f6f8ff 0%, #e9effd 100%);
}
.page-content {
  width: 100%;
  padding-top: 90rpx;
  padding-bottom: 85rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.code {
  width: 641rpx;
  height: 819rpx;
  background: #ffffff;
  box-shadow: 0px 2 18px 0px rgba(0, 0, 0, 0.1);
  border-radius: 14rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 70rpx;
}
.text-1 {
  margin-top: 63rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 29rpx;
  color: #000000;
  line-height: 41rpx;
  text-align: right;
  font-style: normal;
}
.text-2 {
  margin-top: 28rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 33rpx;
  color: #333333;
  line-height: 45rpx;
  text-align: right;
  font-style: normal;
}
.text-3 {
  margin-top: 120rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 40rpx;
  color: #000000;
  line-height: 56rpx;
  text-align: right;
  font-style: normal;
}
.icon-list {
  width: 100%;
  margin-top: 77rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.text-4 {
  margin-top: 10rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 25rpx;
  color: #000000;
  line-height: 36rpx;
  text-align: right;
  font-style: normal;
}
.text-5 {
  margin-top: 6rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #333333;
  line-height: 30rpx;
  text-align: right;
  font-style: normal;
}
</style>
